<mat-card>
  <mat-card-content>
    <mat-grid-list cols="7" rowHeight="70px">
      <mat-grid-tile colspan="2" rowspan="2" class="c-info-img">
        <button mat-icon-button (click)="hideIt()" matTooltip="{{'closeMonitor' | translate}}">
          <mat-icon svgIcon="hide" style="color: darkblue;"></mat-icon>
        </button>
        <img (click)="openHistDialog()" src="../../../assets/images/user.svg" width="100" height="100" matTooltip="{{'hist24hours' | translate}}">
      </mat-grid-tile>

      <mat-grid-tile colspan="5" rowspan="2" class="c-heart-chart">
        <div echarts [options]="hChartOptions" style="height: 120px;width: 100%;" (chartInit)="onHChartInit($event)"></div>
      </mat-grid-tile>

      <mat-grid-tile colspan="2" rowspan="3" class="c-info">
        <mat-list>
          <mat-list-item>{{"name" | translate}}: {{person.personName}}</mat-list-item>
          <mat-list-item>{{"building" | translate}}: {{building}}</mat-list-item>
          <mat-list-item>{{"bed" | translate}}: {{bedNumber}}</mat-list-item>
          <mat-list-item>{{"mainNurse" | translate}}: {{person.nurseName}}</mat-list-item>
          <mat-list-item><strong>{{"resetTips" | translate}}</strong></mat-list-item>
        </mat-list>
      </mat-grid-tile>

      <mat-grid-tile colspan="5" rowspan="2" class="c-breathe-chart">
        <div echarts [options]="bChartOptions" style="height: 120px;width: 100%;" (chartInit)="onBChartInit($event)"></div>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('AWAY')" colspan="1" rowspan="1" class="c-heart" matTooltip="{{'awayTotal' | translate}}">
        <tr><img src="../../../assets/images/bedempty.png" width="32" height="32"></tr>
        <tr><h2>{{awayAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('MOVE')" colspan="1" rowspan="1" class="c-heart" matTooltip="{{'moveTotal' | translate}}">
        <tr><img src="../../../assets/images/bedside.png" width="32" height="32"></tr>
        <tr><h2>{{sideAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('BREATHE')" colspan="1" rowspan="1" class="c-breathe" matTooltip="{{'breatheTotal' | translate}}">
        <tr><img src="../../../assets/images/breathe.png" width="32" height="32"></tr>
        <tr><h2>{{breatheAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('HEART')" colspan="1" rowspan="1" class="c-breathe" matTooltip="{{'heartTotal' | translate}}">
        <tr><img src="../../../assets/images/heart.png" width="32" height="32"></tr>
        <tr><h2>{{heartAlarm}}</h2></tr>
      </mat-grid-tile>

      <mat-grid-tile (click)="openAlarm('WET')" colspan="1" rowspan="1" class="c-breathe" matTooltip="{{'wetTotal' | translate}}">
        <tr><img src="{{'../../../assets/images/wet.png'}}" width="32" height="32"></tr>
        <tr><h2>{{wetAlarm}}</h2></tr>
      </mat-grid-tile>
    </mat-grid-list>
  </mat-card-content>
</mat-card>
